<template>
    <div id="article">
        <el-row id="header">
            <el-col :span="6" :offset="18">
                <el-button type="primary" @click="isAddDia = true">添加新的分类</el-button>
            </el-col>
        </el-row>
        <el-row id="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="name" label="分类名称" ></el-table-column>
                <el-table-column prop="name" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="editRow(scope.$index, scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="danger" size="small">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-dialog title="添加新分类" :visible.sync="isAddDia" width="500px">
            <el-form ref="form" :model="classData" label-width="80px">
                <el-form-item label="分类名称">
                    <el-input placeholder="请填写分类名称" v-model="classData.name"></el-input>
                </el-form-item>
                <el-button type="primary" @click="setAdd">提交</el-button>
            </el-form>
        </el-dialog>

        <el-dialog title="编辑分类" :visible.sync="isEditDia" width="500px">
            <el-form ref="form" :model="classData" label-width="80px">
                <el-form-item label="分类名称">
                    <el-input placeholder="请填写分类名称" v-model="classData.name"></el-input>
                </el-form-item>
                <el-button type="primary" @click="setEdit">提交</el-button>
            </el-form>
        </el-dialog>


    </div>
</template>

<script>
    let that = this;
    export default {
        data() {
            return {
                // 表格数据
                tableData: [],
                // 编辑弹窗
                isEditDia:false,
                // 添加分类弹窗
                isAddDia:false,
                // 编辑弹窗的表单
                classData:{
                    name:''
                }
            };
        },
        methods: {
            // 删除按钮
            deleteRow(q,w){
                console.log(q,w);
                this.$confirm('确认删除名称为 '+w.name+' 的分类？')
                .then(_=>{
                    console.log('delete');
                    this.$as.article.class_delete({id:q})
                    .then(res=>{
                        this.$message.success(res.data)
                    })
                    .catch(errir=>{
                        this.$message.error(res.data)
                    })
                }).catch(_=>{})

            },
            // 编辑按钮
            editRow(index,row){
                this.isEditDia = true;
                console.log(index,row);
            },
            // 添加新分类 提交
            setAdd(){
                
                this.isAddDia = false
                console.log('setAdd',this.classData);
            },

            // 修改分类 提交
            setEdit(){

                console.log('setAdd',this.classData);
            }

        },
        created:function(){
            // 获取列表数据
            this.$as.article.class_list()
            .then((res)=>{
                this.tableData = res.data
            })
            .catch()
        }
    };
</script>

<style lang="scss">
    #article {
        width: 1360px;
        margin: 0 auto;
        #table{
            margin-top: 20px;
        }
    }
</style>